<template>
  <div class="permission-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon">
            <Key />
          </el-icon>
          权限管理
        </h1>
        <p class="page-description">管理系统权限配置，包括权限的增删改查操作</p>
      </div>
    </div>

    <!-- 主要内容卡片 -->
    <el-card class="main-card" shadow="hover">
      <!-- 搜索和操作区域 -->
      <div class="action-section">
        <el-form :inline="true" :model="formInline" class="search-form">
          <el-form-item label="权限名称" class="form-item">
            <el-input v-model="formInline.PermissionName" placeholder="请输入权限名称" clearable class="search-input"
              prefix-icon="Search" />
          </el-form-item>
          <el-form-item class="form-item">
            <el-button type="primary" @click="infodata()" class="action-btn search-btn" :icon="Search">
              查询
            </el-button>
            <el-button type="success" @click="tiankuang()" class="action-btn add-btn" :icon="Plus">
              新增权限
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName" class="data-table"
          stripe highlight-current-row>
          <el-table-column prop="PermissionsId" label="权限编号" width="120" align="center" />
          <el-table-column prop="PermissionName" label="权限名称" width="200" align="center" />
          <el-table-column prop="Component" label="权限URL" width="300" align="center" />
          <el-table-column prop="Serialnumber" label="序号" width="100" align="center" />
          <el-table-column fixed="right" label="操作" min-width="150" align="center">
            <template #default="scope">
              <div class="action-buttons">
                <el-button link type="primary" size="small" @click="updates(scope.row)" class="edit-btn" :icon="Edit">
                  编辑
                </el-button>
                <el-button link type="danger" size="small" @click="delet(scope.row.PermissionsId)" class="delete-btn"
                  :icon="Delete">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 权限添加对话框 -->
    <el-dialog v-model="dialogFormVisible" title="添加权限" width="500px" class="custom-dialog"
      :close-on-click-modal="false">
      <div class="dialog-content">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="dialog-form">
          <el-form-item label="权限名称" prop="PermissionName">
            <el-input v-model="form.PermissionName" placeholder="请输入权限名称" clearable />
          </el-form-item>
          <el-form-item label="权限URL" prop="Component">
            <el-input v-model="form.Component" placeholder="请输入权限URL" clearable />
          </el-form-item>
          <el-form-item label="序号" prop="Serialnumber">
            <el-input-number v-model="form.Serialnumber" :min="1" placeholder="请输入序号" style="width: 100%" />
          </el-form-item>

          <el-form-item label="上级">
            <el-cascader v-model="form.Parentnumber" :options="options" :props="props1" clearable
              @change="handleChange" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="queding()" class="confirm-btn">
            确认添加
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改权限信息对话框 -->
    <el-dialog v-model="dialogTableVisibleUpdate" title="修改权限信息" width="500px" class="custom-dialog"
      :close-on-click-modal="false">
      <div class="dialog-content">
        <el-form :model="form" :rules="rules" ref="editFormRef" label-width="100px" class="dialog-form">
          <el-form-item label="权限名称" prop="PermissionName">
            <el-input v-model="form.PermissionName" placeholder="请输入权限名称" clearable />
          </el-form-item>
          <el-form-item label="权限URL" prop="Component">
            <el-input v-model="form.Component" placeholder="请输入权限URL" clearable />
          </el-form-item>
          <el-form-item label="序号" prop="Serialnumber">
            <el-input-number v-model="form.Serialnumber" :min="1" placeholder="请输入序号" style="width: 100%" />
          </el-form-item>
          <el-form-item label="上级">
            <el-cascader v-model="form.Parentnumber" :options="options" :props="props1" clearable
              @change="handleChange" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisibleUpdate = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="quedingupdate()" class="confirm-btn">
            确认修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { serviceRead, serviceWrite } from '@/utils/Interceptors'
import { Search, Plus, Edit, Delete, Key } from '@element-plus/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

import axios from 'axios'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
const dialogTableVisibleUpdate = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const formRef = ref<FormInstance>()
const editFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  PermissionName: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
  ],
  Component: [
    { required: true, message: '请输入权限URL', trigger: 'blur' },
  ],
  Serialnumber: [
    { required: true, message: '请输入序号', trigger: 'blur' },
  ],
})

const props1 = {
  value: 'PermissionsId',
  label: 'PermissionName',
  children: 'children',
  checkStrictly: true,
}

const props2 = {
  multiple: true,
  checkStrictly: true,
}

const options = ref([])

const handleChange = (value: any) => {
  form.Parentnumber = value[value.length - 1]
}


//获取级联信息

const Terrinfo = () => {
  serviceRead.get('/api/Permissions/SearchTreeshape').then(res => {
    options.value = res.data.data
    console.log(options);

  })
}

onMounted(() => {
  Terrinfo()
})

//编辑弹框
const updates = (row: any) => {
  dialogTableVisibleUpdate.value = true
  Object.assign(form, row)
  console.log('form:', form);
}

const quedingupdate = async () => {
  if (!editFormRef.value) return
  await editFormRef.value.validate((valid) => {
    if (valid) {
      serviceWrite.put('/api/Permissions/UpdatePermissions', form).then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
          dialogTableVisibleUpdate.value = false;
          infodata()
        } else {
          ElMessage.error(res.data.msg)
        }
      })
    }
  })
}

//单删
const delet = (Id: any) => {

  ElMessageBox.confirm(
    '是否删除当前信息',
    '权限删除管理',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      var data = { PermissionsId: Id }
      serviceWrite.delete('/api/Permissions/DelePermissions', { data }).then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
          dialogFormVisible.value = false;
          infodata()
        } else {
          ElMessage.error(res.data.msg)
        }
      })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })



}

//权限字段
const form = reactive({
  PermissionsId: '',
  PermissionName: '',
  Component: '',
  Serialnumber: '',
  IsDeleted: '',
  Parentnumber: null
})

//弹框添加
const tiankuang = () => {
  dialogFormVisible.value = true;
  form.PermissionName = '',
    form.Component = '',
    form.Serialnumber ='',
    form.Parentnumber=null
}

//提交权限添加
const queding = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      serviceWrite.post('/api/Permissions/AddPermissions', form).then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
          dialogFormVisible.value = false;
          infodata()
        } else {
          ElMessage.error(res.data.msg)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//获取权限数据
const formInline = reactive({
  PermissionName: '',
})

const tableData = ref()

const infodata = () => {
  serviceWrite.get('/api/Permissions/SreachPermissions', { params: formInline }).then(res => {
    tableData.value = res.data.data
  })
}


//获取权限名称
const Permissionname = ref()

const Permissionnameinfo = () => {
  serviceWrite.get('/api/Permissions/SearchPermissionsinfo').then(res => {
    Permissionname.value = res.data.data

    console.log(Permissionname);

  })
}

onMounted(() => {
  infodata()
  Permissionnameinfo()
})
</script>

<style scoped>
.permission-container {
  min-height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面标题区域 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px 0;
  margin-bottom: 24px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  text-align: center;
  color: white;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon {
  font-size: 36px;
  color: #ffd700;
}

.page-description {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

/* 主卡片样式 */
.main-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

/* 操作区域样式 */
.action-section {
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  margin-bottom: 24px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form-item {
  margin-bottom: 0;
}

.search-input {
  width: 300px;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.search-btn {
  background: linear-gradient(45deg, #409EFF, #67C23A);
  border: none;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.add-btn {
  background: linear-gradient(45deg, #67C23A, #E6A23C);
  border: none;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

/* 表格区域样式 */
.table-section {
  padding: 0 24px 24px;
}

.data-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.edit-btn {
  color: #409EFF;
  font-weight: 500;
}

.edit-btn:hover {
  background: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.delete-btn {
  color: #F56C6C;
  font-weight: 500;
}

.delete-btn:hover {
  background: rgba(245, 108, 108, 0.1);
  border-radius: 4px;
}

/* 对话框样式 */
.custom-dialog {
  border-radius: 16px;
}

.dialog-content {
  padding: 20px 0;
}

.dialog-form {
  max-width: 100%;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}

.cancel-btn {
  border-radius: 8px;
  padding: 10px 20px;
}

.confirm-btn {
  border-radius: 8px;
  padding: 10px 20px;
  background: linear-gradient(45deg, #409EFF, #67C23A);
  border: none;
}

.confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 表格行样式 */
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 24px;
  }

  .title-icon {
    font-size: 28px;
  }

  .search-input {
    width: 100%;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .action-section {
    padding: 16px;
  }

  .table-section {
    padding: 0 16px 16px;
  }
}

/* 动画效果 */
.main-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>